<template>
  <div class="doclist">
    <div class="nav"></div>
    <div class="list" v-if="list.length > 0">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div class="box">
            <div class="content" @click="goback(item)">
              <div class="name">{{ item.name }}</div>
              <div class="phone">
                联系方式：{{
                  item.phone.replace(/(\w{3})\w*(\w{4})/, "$1****$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 1">
                身份证号：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 6">
                出生证号：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 4">
                港澳居民来往内地通行证号：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 5">
                医保卡：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 2">
                军官证：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 3">
                护照：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 7">
                台胞居住证：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
              <div class="num" v-if="item.cardtype == 99">
                其他：{{
                  item.cardno.replace(/(\w{4})\w*(\w{4})/, "$1**********$2")
                }}
              </div>
            </div>
            <div
              class="del"
              style="width:60px; height:25px;color:red;font-size:14px; text-align:center; line-height:25px; "
              @click="detail(item.id)"
            >
              删除
            </div>
          </div>

          <div class="line"></div>
        </li>
      </ul>
    </div>
    <div class="list" v-else><van-empty description="暂无就诊人" /></div>
    <div class="no-doctor">
      <div class="add" @click="addScDoctor()">+添加就诊人</div>
    </div>
  </div>
</template>
<script>
import { getUserinfoApi, ifindexdelApi, addtypeApi } from "@/service/api.js";
import { loginByWxOpenidApi } from "@/service/api.js";

import { SwipeCell, Toast } from "vant";
import { Button } from "vant";
import { Dialog } from "vant";
export default {
  name: "index",
  inject: ["reload"],

  data() {
    return {
      id: "",
      msg: "",
      token: "",
      firstList: {},
      list: [],
      count: 3,
      choose: ""
    };
  },
  components: {},
  created() {
    // 获取token
    this.choose = JSON.parse(localStorage.getItem("choose"));
    localStorage.getItem("token"), (this.token = localStorage.getItem("token"));
    this.getUserinfo();
  },
  mounted() {
    window.onpageshow = function(e) {
      console.log("执行了onpageshow");
      if (
        e.persisted ||
        (window.performance && window.performance.navigation.type == 2)
      ) {
        window.location.reload();
      }
    };
  },
  methods: {
    // 获取用户及子档案信息
    getUserinfo() {
      let apptoken = JSON.parse(localStorage.getItem("apptoken"));

      getUserinfoApi({
        token: this.token,
        apptoken: apptoken
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);

          this.list = res.data.list;
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");

          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },

    // 删除
    detail(id) {
      console.log(id);
      console.log("删除");
      Dialog.confirm({
        title: "提示信息",
        message: "您确定要删除当前就诊人",
        confirmButtonColor: "#07C6B4"
      })
        .then(() => {
          console.log("点击了确定");
          let apptoken = JSON.parse(localStorage.getItem("apptoken"));

          ifindexdelApi({
            userInfoId: id,
            token: this.token,
            apptoken: apptoken
          }).then(res => {
            console.log(res);
            if (res.code == 4000) {
              Toast("删除成功");
              this.getUserinfo();
            }
          });
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },
    // 添加就诊人
    addScDoctor() {
      let apptoken = JSON.parse(localStorage.getItem("apptoken"));

      addtypeApi({
        apptoken: apptoken,
        token: this.token
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          if (res.data.isJumpHealthCard == 0) {
            //改这里
            this.$router.push({
              name: "add_doctor"
            });
          } else if (res.data.isJumpHealthCard == 1) {
            window.location = res.data.link;
          }
        }
      });
      // this.$router.push({
      //   name: "add_doctor"
      // });
      //  this.$router.push({
      //     name: "add_doctor",
      //     query: {
      //       id: this.id,
      //     },
      //   });
    }
  }
};
</script>
<style lang="scss" scoped>
.doclist {
  padding-bottom: 2rem;
  margin-top: 1rem;
  .no-doctor {
    width: 100%;
    padding-bottom: 2rem;
    .banner-img {
      width: 3rem;
      height: 2rem;
      margin: 0 auto;
      margin-top: 3rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .banner-message {
      font-size: 0.4rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #c4c4c4;
      text-align: center;
      margin-top: 0.3rem;
    }
  }

  .list {
    width: 100%;
    padding-top: 0.2rem;
    font-size: 0.35rem;
    ul {
      height: 100%;
      li {
        width: 100%;
        padding-bottom: 0.2rem;
        .line {
          width: 95%;
          height: 0.01rem;
          background: #cccccc;
          margin: 0 auto;
        }
        .box {
          width: 90%;
          margin: 0 auto;
          padding-bottom: 0.2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .logo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 15px 14px 10px 11px;
            background: bisque;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .content {
            width: 8rem;
            display: flex;
            flex-direction: column;
            margin-top: 0;
            .name {
              font-size: 0.4rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: #000000;
              margin-top: 0.2rem;
              margin-bottom: 0.1rem;
            }
            .phone {
              font-size: 0.35rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              line-height: 0.6rem;
            }
            .num {
              font-size: 0.35rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              line-height: 0.6rem;
            }
          }
        }
      }
    }
  }
  .add {
    width: 8rem;
    height: 1.2rem;
    margin: 0 auto;
    background: #07c6b4;
    border-radius: 5px;
    text-align: center;
    line-height: 1.2rem;
    font-size: 0.45rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.2rem;
    margin-top: 1rem;
  }
}
.vant-button-left {
  width: 60px;
  height: 69px;
}
.vant-button-right {
  width: 60px;
  height: 69px;
  margin-left: -1px;
}
.goods-card {
  height: 69px;
  margin: 0;
  background-color: #ffff;
}

.delete-button {
  height: 100%;
}
</style>
